<template>
  <div class="dashboard">
    <h1>控制台</h1>

    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="8">
        <el-card class="stat-card" v-loading="loading">
          <template #header>
            <div class="card-header">
              <span>活跃广告</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.activeAds || 0 }}</div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card" v-loading="loading">
          <template #header>
            <div class="card-header">
              <span>总展示次数</span>
            </div>
          </template>
          <div class="stat-value">{{ formatNumber(stats.totalImpressions) }}</div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card" v-loading="loading">
          <template #header>
            <div class="card-header">
              <span>总点击次数</span>
            </div>
          </template>
          <div class="stat-value">{{ formatNumber(stats.totalClicks) }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近广告表格 -->
    <div class="recent-ads">
      <h2>最近广告</h2>
      <el-table :data="recentAds" v-loading="loading" style="width: 100%">
        <el-table-column prop="title" label="广告名称" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ statusTextMap[row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="展示次数" width="120">
          <template #default="{ row }">
            {{ formatNumber(row.impressions) }}
          </template>
        </el-table-column>
        <el-table-column label="点击次数" width="120">
          <template #default="{ row }">
            {{ formatNumber(row.clicks) }}
          </template>
        </el-table-column>
        <el-table-column label="点击率" width="120">
          <template #default="{ row }">
            {{ formatPercentage(row.ctr) }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatTime(row.createdTime) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getDashboardData } from '@/api/dashboard'
import dayjs from 'dayjs'

// 状态映射
const statusTextMap = {
  0: '待审核',
  1: '已审核',
  2: '投放中',
  3: '已完成',
  4: '已拒绝'
}

const statusTypeMap = {
  0: 'info',
  1: 'success',
  2: 'primary',
  3: 'success',
  4: 'danger'
}

// 响应式数据
const loading = ref(true)
const stats = ref({
  activeAds: 0,
  totalImpressions: 0,
  totalClicks: 0
})
const recentAds = ref([])

// 获取仪表盘数据
const fetchData = async () => {
  try {
    loading.value = true
    const res = await getDashboardData()
    if (res.data.code === 200) {
      stats.value = res.data.data.stats
      recentAds.value = res.data.data.recentAds
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('获取仪表盘数据失败')
  } finally {
    loading.value = false
  }
}

// 格式化函数
const formatNumber = (num) => {
  return num?.toLocaleString() ?? '0'
}

const formatPercentage = (ctr) => {
  return ctr ? `${(ctr * 100).toFixed(2)}%` : '0%'
}

const formatTime = (time) => {
  return time ? dayjs(time).format('YYYY-MM-DD HH:mm') : '--'
}

const getStatusType = (status) => {
  return statusTypeMap[status] || 'info'
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
.dashboard h1{
  font-size: 24px;
  font-weight: 500;
}
.stat-card {
  margin-bottom: 20px;
  min-height: 150px;
}

.card-header {
  font-weight: 600;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #409EFF;
  margin: 20px 0;
}

.recent-ads {
  margin-top: 30px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

h1, h2 {
  color: #303133;
  margin-bottom: 20px;
}
</style>